<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>跑者信息中心</title>
    <link rel="stylesheet" href="css/css/all.min.css">
    <link rel="stylesheet" href="css/me.css">

</head>
<body>
<!-- 跑步轨迹背景 -->
<div class="running-track">
    <svg width="100%" height="100%" viewBox="0 0 800 600">
        <path class="track-path" d="M-50,300 Q150,100 300,300 T700,300" />
    </svg>
    <div class="runner-icon">
        <i class="fas fa-running"></i>
    </div>
</div>

<!-- 装饰元素 -->
<div class="running-decoration">
    <div class="decoration-item"><i class="fas fa-shoe-prints"></i></div>
    <div class="decoration-item"><i class="fas fa-medal"></i></div>
    <div class="decoration-item"><i class="fas fa-stopwatch"></i></div>
    <div class="decoration-item"><i class="fas fa-route"></i></div>
    <div class="decoration-item"><i class="fas fa-heartbeat"></i></div>
</div>

<div class="container">
    <div class="card">
        <div class="card-header">
            <div class="avatar">
                <i class="fas fa-running"></i>
            </div>
            <h1>跑者信息中心</h1>
            <p>管理您的跑步账户信息</p>
        </div>

        <div class="card-body">
            <div class="info-item">
                <div class="info-icon">
                    <i class="fas fa-user"></i>
                </div>
                <div class="info-content">
                    <h3>跑者用户名</h3>
                    <p id="username-display">speed_runner</p>
                    <input type="text" id="username-input" value="speed_runner" style="display: none;">
                </div>
            </div>

            <div class="info-item">
                <div class="info-icon">
                    <i class="fas fa-lock"></i>
                </div>
                <div class="info-content">
                    <h3>账户密码</h3>
                    <div class="password-field">
                        <!-- 密码始终显示为星号 -->
                        <p id="password-display">••••••••</p>
                        <input type="password" id="password-input" value="" style="display: none;">
                    </div>
                </div>
            </div>

            <div class="info-item">
                <div class="info-icon">
                    <i class="fas fa-phone"></i>
                </div>
                <div class="info-content">
                    <h3>联系手机</h3>
                    <p id="phone-display">138-0013-8000</p>
                    <input type="tel" id="phone-input" value="138-0013-8000" style="display: none;">
                </div>
            </div>
        </div>

        <div class="card-footer">
            <button class="btn btn-edit" id="edit-btn">
                <i class="fas fa-edit"></i> 编辑信息
            </button>
            <button class="btn btn-save" id="save-btn" style="display: none;">
                <i class="fas fa-save"></i> 保存修改
            </button>
            <button class="btn btn-cancel" id="cancel-btn" style="display: none;">
                <i class="fas fa-times"></i> 取消
            </button>
        </div>
    </div>
</div>

<div class="notification" id="notification">
    <i class="fas fa-check-circle"></i>
    <span id="notification-text">信息更新成功</span>
</div>
<script src="js/jquery.min.js"></script>
<script src="js/common.js"></script>
<script>
    $(document).ready(function() {
        // 用户数据变量（在外部定义）
        let userData = {};

        // 显示加载状态
        $("#loading-overlay").show();

        // 获取用户信息
        $.ajax({
            type: "GET",
            url: "user/getUserInfo",
            success: function(response) {
                if (response && response.data) {
                    const result = response.data;
                    userData = {
                        username: result.username,
                        password: result.password,
                        phone: result.mobile
                    };

                    // 初始化显示
                    $("#username-display").text(userData.username);
                    $("#phone-display").text(userData.phone);

                    // 启用编辑按钮
                    $("#edit-btn").prop("disabled", false);
                } else {
                    showNotification('获取用户信息失败', 'error');
                    $("#username-display").text('加载失败');
                    $("#phone-display").text('加载失败');
                }
            },
            error: function() {
                showNotification('无法获取用户信息', 'error');
                $("#username-display").text('加载失败');
                $("#phone-display").text('加载失败');
            },
            complete: function() {
                // 隐藏加载状态
                $("#loading-overlay").hide();
            }
        });

        // 编辑按钮点击事件
        $("#edit-btn").click(function() {
            // 显示输入框
            $(".info-content p").hide();
            $(".info-content input").show();

            // 设置输入框值
            $("#username-input").val(userData.username);
            $("#phone-input").val(userData.phone);

            // 密码输入框留空（安全考虑）
            $("#password-input").val("");

            // 切换按钮
            $(this).hide();
            $("#save-btn, #cancel-btn").show();
        });

        // 取消按钮点击事件
        $("#cancel-btn").click(function() {
            // 恢复显示
            $(".info-content p").show();
            $(".info-content input").hide();

            // 切换按钮
            $("#edit-btn").show();
            $("#save-btn, #cancel-btn").hide();

            showNotification('已取消修改', 'success');
        });

        // 保存按钮点击事件
        $("#save-btn").click(function() {
            // 获取输入值
            const newUsername = $("#username-input").val().trim();
            const newPassword = $("#password-input").val().trim();
            const newPhone = $("#phone-input").val().trim();

            // 验证输入
            if (!newUsername) {
                showNotification('用户名不能为空', 'error');
                return;
            }

            if (!/^1[3-9]\d{9}$/.test(newPhone.replace(/-/g, ''))) {
                showNotification('请输入有效的手机号码', 'error');
                return;
            }

            // 显示加载状态
            const saveBtn = $(this);
            saveBtn.html('<i class="fas fa-spinner fa-spin"></i> 保存中...');
            saveBtn.prop("disabled", true);

            // 准备发送的数据
            const updateData = {
                username: newUsername,
                phone: newPhone
            };

            // 如果用户输入了新密码，则包含在更新数据中
            if (newPassword) {
                updateData.password = newPassword;
            }

            // 发送AJAX请求
            $.ajax({
                type: "POST",
                url: "user/updateUser",
                data: updateData,
                success: function(response) {
                    console.log(response)
                    if (response) {
                        // 更新本地数据
                        userData.username = newUsername;
                        userData.phone = newPhone;

                        // 如果更新了密码，更新本地存储
                        if (newPassword) {
                            userData.password = newPassword;
                        }

                        // 更新显示
                        $("#username-display").text(userData.username);
                        $("#phone-display").text(userData.phone);

                        // 切换回显示模式
                        $(".info-content p").show();
                        $(".info-content input").hide();

                        // 切换按钮
                        $("#edit-btn").show();
                        $("#save-btn, #cancel-btn").hide();

                        showNotification('用户信息更新成功！', 'success');
                    } else {
                        showNotification('更新失败' , 'error');
                    }
                },
                complete: function() {
                    saveBtn.html('<i class="fas fa-save"></i> 保存修改');
                    saveBtn.prop("disabled", false);
                },
                error:function (error){
                    if(error!=null&&error.status==401){
                        location.href = "/login.html"
                    }
                }

            });
        });

        // 显示通知
        function showNotification(message, type) {
            const notification = $("#notification");
            const text = $("#notification-text");

            text.text(message);
            notification
                .removeClass("success error show")
                .addClass(type + " show");

            setTimeout(() => {
                notification.removeClass("show");
            }, 3000);
        }
    });
</script>
</body>
</html>